import HomePage_HeaderOperationComponent from "../../component/headerOperation"
import { ReactComponent as LoginLogSvg } from '../../../../assets/svg/accountManagement.svg'
import { ReactComponent as ReviewWorkOrderSvg } from '../../../../assets/svg/reviewWorkOrder.svg'
import { ReactComponent as AccountManagementSvg } from '../../../../assets/svg/loginLog.svg'
import { ReactComponent as DefaultConfigurationSvg } from '../../../../assets/svg/defaultConfiguration.svg'
import { Outlet } from "react-router-dom"
import { $echartsData, $headerOperationBtnData, $headerOperationConditionData, $PowerSetting } from "../../../../common/utils"
import { useEffect, useState } from "react"

// 主页-系统设置页面
const HomePage_SystemSettingsPage: React.FC = () => {
  const [tabList, setTabList] = useState<Array<object>>([
    {
      svg: LoginLogSvg,
      title: "操作日志",
      router: "loginLog",
      operationData: {
        isDateTimePickerRange: true
      }
    },
    {
      svg: AccountManagementSvg,
      title: "账号管理",
      router: "accountManagement",
      operationData: {
        btnList: [
          $headerOperationBtnData("新建", "add"),
          $headerOperationBtnData("查询", "search", {}, true),
        ],
        conditionList: [
          $headerOperationConditionData["input"]("账号名", "username"),
          $headerOperationConditionData["gender"],
        ],
        initParamsData: { username: "", gender: "全部" }
      }
    },
  ])

  const isReviewWorkOrder = () => {
    if ($PowerSetting()["superPower"]) {
      tabList.splice(1, 0, {
        svg: ReviewWorkOrderSvg,
        title: "审核工单",
        router: "reviewWorkOrder",
        operationData: {
          isLayoutSetting: true,
          isWarningLineHide: true,
          layoutItemList: ["工单", "历史"]
        }
      },)
      setTabList([...tabList])
    }

  }

  const isDefaultConfiguration = () => {
    if ($PowerSetting()["basePower"]) {
      tabList.push(
        {
          svg: DefaultConfigurationSvg,
          title: "默认配置",
          router: "defaultConfiguration",
          operationData: {
            btnList: [
              $headerOperationBtnData("保存", "save"),
            ],
          }
        }
      )
      setTabList([...tabList])
    }
  }
  useEffect(() => {
    isReviewWorkOrder()
    isDefaultConfiguration()
  }, [])
  return (
    <div className="homePage-page">
      <HomePage_HeaderOperationComponent tabList={tabList} />
      <main className="homePage-page__main">
        <Outlet />
      </main>
    </div>
  )
}

export default HomePage_SystemSettingsPage